﻿<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jquery立方体</title>
<script src="../js/jquery.min.js"></script>
<style>
 html,body {
	height:100%;
	background-color:#000000;
	perspective:1000px;
	/*3d视距*/
}
.container {
	width:300px;
	height:300px;
	position:absolute;
	left:calc(50% - 150px);
	/*calc计算属性*/
            top:calc(50% - 150px);
	transform-style:preserve-3d;
	/*开启3D*/
            -webkit-transform-style:preserve-3d;
	-moz-transform-style:preserve-3d;
}
.container div {
	width:300px;
	height:300px;
	border-radius:20px;
	position:absolute;
	box-shadow:0px 0px 60px white;
	opacity:0.8;
	background-size:contain;
}
</style>
</head>
<body>
<div class="container">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

<script>
var index = 0;
$(document).ready(function() {
    $(".container div").each(function() {
        $(".container div").eq(index).css("background", 'url(' + 'http://www.jq22.com/img/cs/500x500-' + (index + 1) + '.png') //插入图片样式需如'a1.png'
        $(".container div").eq(index).css({
            'backgroundSize': 'cover',
            'backgroundRepeat': 'no-repeat'
        })
        index++;
    })
    $(".container div:nth-child(1)").css("transform", "rotateX(-90deg) translateZ(150px)"); //平移div位置形成立方体
    $(".container div:nth-child(2)").css("transform", "rotateX(90deg) translateZ(150px)");
    $(".container div:nth-child(3)").css("transform", "rotateZ(-90deg) translateZ(150px)");
    $(".container div:nth-child(4)").css("transform", "rotateY(90deg) translateZ(150px)");
    $(".container div:nth-child(5)").css("transform", "rotateY(-90deg) translateZ(150px)");
    $(".container div:nth-child(6)").css("transform", "rotateZ(90deg) translateZ(-150px)");
    //添加一个动画效果,可以自行改变
    function rotate() {
        $(".container").css('transform', 'rotateY(' + 10 * index + 'deg) rotateZ(' + 20 * index + 'deg) rotateX(' + -15 * index + 'deg)')
        if (index == 30) {
            index = 1;
        } else {
            index++;
        }
    }
    var timer = setInterval(rotate, 100)
})
</script>

</body>
</html>
